<template>
  <div class="table_tem">
    <div class="g_box" v-for="(item,index) in list" :key="index">
      <div class="g_head">
        <h3>{{item.name}}</h3>
        <div class="g_box_right">
          <ButtonGroup class="g_act_box">
			<Button @click="merge_data(index)">合拼表格</Button>
            <Button @click="add_line">新增数据</Button>
            <Button @click="export_data(index)">导出表格</Button>
            <!--Button @click="update_data(index)">刷新表格</Button-->
            <!-- <Button @click="keep_data(index)">保存表格</Button> -->
          </ButtonGroup>
          <div class="g_other"></div>
        </div>
      </div>
      <div class="g_box_con">
        <Table :loading="loading" :columns="item.Columns" :data="item.data.list" style="width: 100%;" size="small" :border="true"></Table>
      </div>
    </div>
	
	<!--总计-->
	<div class="g_box" v-if="list.length>0">
		<div class="g_head">
			<h3>总收入</h3>
			<div class="g_box_right">
				<ButtonGroup class="g_act_box">
					<Button @click="export_all">导出表格</Button>
				</ButtonGroup>
				<div class="g_other"></div>
			</div>
		</div>
		<div class="g_box_con">
			<Table :columns="list[0].Columns" :data="total.list" style="width: 100%;" size="small" :border="true" ></Table>
      </div>
    </div>

    <!-- 编辑 -->
    <info_box v-model="einfo.show" :isEdit="isEdit" :cinfo="einfo.info" :date_month="einfo.date_month" @success="info_success"></info_box>
	<Modal
        v-model="edit_info.show"
        title="编辑数据"
        @on-ok="edit_info_ok"
        >
        <div>
			<Form :model="edit_info.info" :label-width="80">
				<FormItem label="客户名称：">
					<Input v-model="edit_info.info.custom_name" placeholder="" style="width:250px;"></Input>
				</FormItem>
				<FormItem label="金额：">
					<Input v-model="edit_info.info.money" placeholder="" style="width:250px;"></Input>
				</FormItem>
				<FormItem label="备注：">
					<Input type="textarea" v-model="edit_info.info.remarks" :row="4" placeholder="" style="width:250px;"></Input>
				</FormItem>
			</Form>
		</div>
    </Modal>
</div>
</template>

<script>
import info_box from "./info";
import Wcore from '@/libs/common';

export default {
  name: "table_tem",
  props:{
	cdata:{
		default:[]
	},
	filter:{
		default:[]
	},
  },
  data() {
	var self = this;
    return {
      isEdit:false,
	  bakList:[],
	  keepList:[],//保存的表格数据
	  list:[],
      Columns: [
        {
          title: "客户名称",
          key: "custom_name",
          align: "center",
          width: 100
        },
        {
          title: "币种",
          key: "bz",
          width: 100,
          render: (h, params) => {
			return h('div',params.row.bz);
		  }
        },
        {
          title: "业务合计",
          key: "total",
          width: 100,
		  render: (h, params) => {
			var total = 0;
			var name = 'subject';
			for(var i in params.row){
				if(i.substr(0,name.length)==name && i.length>name.length){
					total += parseFloat(params.row[i]);
				}
			}
			
			return h('div',total);
		  }
        },
        {
          title: "备注",
          key: "remarks",
           width: 120,
        },
        {
          title: "操作",
          key: "action",
		  width: 180,
          render: (h, params) => {
			if(params.row.is_total){
				return ;
			}
			//type=2是律所代收的数据，这里添加一个可编辑的
			if(params.row.type == 2){

				return h("div", [
	              h(
	                "Button",
	                {
	                  props: {
	                    type: "info",
	                    size: "small",
	                  },
	                  style: {marginRight:'5px'},
	                  on:{
	                    click: () => {
	                       self.edit(params.row)
	                    }
	                  }
	                },
	                "编辑"
	              ),
	              h(
	                "Button",
	                {
	                  props: {
	                    type: "info",
	                    size: "small",
	                    //icon: "trash-a"
	                  },
	                  style: {marginRight:'5px'},
	                  on: {
	                    click: () => {
	                      self.remove(params.row.id);
	                    }
	                  }
	                },
	                "删除"
	              ),
	              h(
	                "Button",
	                {
	                  props: {
	                    type: "info",
	                    size: "small",
	                  },
	                  style: {},
	                  on:{
	                    click: () => {
	                       self.dbedit(params.row,params.index);
	                    }
	                  }
	                },
	                "修改"
	              )
	            ]);

			}else{
				return h("div", [
	              h(
	                "Button",
	                {
	                  props: {
	                    type: "info",
	                    size: "small",
	                  },
	                  style: {marginRight:'5px'},
	                  on:{
	                    click: () => {
	                       self.edit(params.row)
	                    }
	                  }
	                },
	                "编辑"
	              ),
	              h(
	                "Button",
	                {
	                  props: {
	                    type: "info",
	                    size: "small",
	                    //icon: "trash-a"
	                  },
	                  style: {},
	                  on: {
	                    click: () => {
	                      self.remove(params.row.id);
	                    }
	                  }
	                },
	                "删除"
	              )
	            ]);
			}
            
          },
        }
      ],
      loading: false,
      imports: {
        show: false,
        mark: "",
        company_id: 0
      },
		einfo: {
			show: false,
		},
		edit_info:{
			show: false,
			id:0,
			info:{
				custom_name:'',
				remarks:''
			}
		},
		default_info:{
			id:0,
			date_month:localStorage.cash_balance?localStorage.cash_balance:new Date().Format('yyyy-MM'),
			region:'',
			company:'',
			bumen:'',
			subject:'',
			bz:'all',
			type:2
		},
    };
  },
	components: {
		info_box
	},
	created() {
		this.show = this.value;
	},
	watch: {
		cdata:{
			handler(val){
				var arr = this._getData(val.list);
				
				for(var i=0;i<arr.length;i++){
					arr[i].Columns = this.getColumns(arr[i].data.colnmns);
					arr[i].list = this.getLists(arr[i].data);
					
				}
				this.bakList = this._getData(arr);
				this.list = arr;
				
				this.total = val.total;
			},
			deep:true
		},
	},
  methods: {
	getColumns(data){
		var arr = [this.Columns[0]];
		
		for(var i in data){
			arr.push({
				title: data[i],
				key: i,
				align: "center",
				width: 150
			});
		}
		arr.push(this.Columns[1]);
		arr.push(this.Columns[2]);
		arr.push(this.Columns[3]);
		arr.push(this.Columns[4]);
		
		return arr;
	},
	getLists(data){
		
		var arr = data.list;
		
		var ls_data = {
			custom_name:'本月合计',
			is_total:1
		};
		for(var i in data.total_month){
			ls_data[i] = parseFloat(data.total_month[i]).toFixed(2);;
		}
		arr.push(ls_data);
		
		
		var ls_data = {
			custom_name:'本年累计',
			is_total:1
		};
		for(var i in data.total_year){
			ls_data[i] = parseFloat(data.total_year[i]).toFixed(2);;
		}
		arr.push(ls_data);
		
		
		
		return arr;
	},
    add_line() {
    	this.einfo.info = this.default_info;
		this.einfo.show = true;
		this.einfo.date_month = localStorage.cash_balance?localStorage.cash_balance:new Date().Format('yyyy-MM');
    },
    dbedit(row,index){
		this.einfo.date_month = row.date_month;
		this.einfo.info = this._getData(row);//console.log(this.einfo.info);return false;
		this.einfo.show = true;
		this.isEdit = true;
	},
    edit_info_ok() {
		
		var self = this;
		var postdata = {
			'custom_name':this.edit_info.info.custom_name,
			'remarks':this.edit_info.info.remarks,
			'date_month':this.edit_info.info.date_month,
			'mtype':this.edit_info.info.mtype,
			'money':this.edit_info.info.money,
			'id':this.edit_info.id
		};
		
		Whttp.load('Chuna/Income/edit_data',postdata,function(result){
			//self.$Message.info('提交成功');
			//self.edit_info.show = false; 
			location.reload();
		});
    },
    remove(id) {
		var list = this.list;
		for(var i=0;i<list.length;i++){
			var ls_list = list[i].list;
			for(var j=0;i<ls_list.length;i++){
				if(ls_list[j].id==id){
					ls_list.splice(j,1);
					break
				}
			}
		}
    },
	edit(info){
		
		this.edit_info.id = info.id;
		this.edit_info.info = info;
		
		this.edit_info.show = true;
	},
	merge_data(index){//数据合并
		var list = this.list[index].list;
		
		var ls_arr = [];
		var arr = [];
		var name = 'subject';
		
		for(var i=0;i<list.length;i++){
			var ls_index = -1;
			
			for(var j=0;j<arr.length;j++){
				if(list[i].custom_name!='' && list[i].custom_name==arr[j].custom_name){
					ls_index = j;
					break;
				}
			}
			
			if(ls_index>=0){
				var data = this._getData(list[i]);
				for(var k in data){
					if(k.substr(0,name.length)==name){
						if(typeof(arr[ls_index][k])!='undefined'){
							var ls_num =  parseFloat(arr[ls_index][k]) + parseFloat(data[k]);
							arr[ls_index][k] = ls_num.toFixed(2);
						}
						else{
							arr[ls_index][k] = parseFloat(data[k]).toFixed(2);;
						}
						
					}
					else if(k=='remarks'){
						if(typeof(arr[ls_index][k])!='undefined'){
							arr[ls_index]['remarks'] += ';'+data[k];
						}
						else{
							arr[ls_index]['remarks'] = data[k];
						}
					}
				}
			}
			else{
				ls_arr.push(list[i].custom_name);
				arr.push(list[i]);
			}
		}
		this.list[index].list = arr;
	},
	info_success(result){
		this.einfo.show = false;
	},
	export_data(index){
		var data = this._getData(this.list[index]);
		var list = data.list;
		var columns = {};
		for(var i=0;i<data.Columns.length;i++){
			if(i==data.Columns.length-1){
				break;
			}
			columns[data.Columns[i].key] = data.Columns[i].title;
		}
		
		var name = 'subject';
		
		for(var i=0;i<list.length;i++){
			var total = 0;
			for(var k in list[i]){
				if(k.substr(0,name.length)==name && k.length>name.length){
					total += parseFloat(list[i][k]);
				}
			}
			list[i].total = total;
		}
		
		var self = this;
		var postdata = {
			columns:columns,
			list:list,
			name:data.name
		};
		
		Whttp.load('Chuna/Income/export_data',postdata,function(result){//console.log(result);return false;
			window.open(result);
			self.$Message.info('导出成功');
			
		});
	},
	export_all(){
		var mlist = this._getData(this.list);
		
		var data = mlist[0];

		var columns = {};
		for(var i=0;i<data.Columns.length;i++){
			if(i==data.Columns.length-1){
				break;
			}
			columns[data.Columns[i].key] = data.Columns[i].title;
		}
		
		var name = 'subject';
		
		
		for(var i=0;i<mlist.length;i++){
			var list = this._getData(mlist[i].list);
			
			for(var j=0;j<list.length;j++){
				var total = 0;
				for(var k in list[j]){
					if(k.substr(0,name.length)==name && k.length>name.length){
						total += parseFloat(list[j][k]);
					}
				}
				list[j].total = total;
			}
			mlist[i].list = list;
		}
		
		var mtotal = this._getData(this.total.list);
		for(var i=0;i<mtotal.length;i++){
			var total = 0;
			for(var k in mtotal[i]){
				if(k.substr(0,name.length)==name){
					total += parseFloat(mtotal[i][k]);
				}
			}
			mtotal[i].total = total;
		}
		
		
		
		var self = this;
		var postdata = {
			columns:columns,
			list:mlist,
			totals:mtotal
		};
		
		Whttp.load('Chuna/Income/export_all',postdata,function(result){//console.log(result);return false;
			window.open(result);
			self.$Message.info('导出成功');
			
		});
	},
	/*keep_data(index){
		Wcore.setData('incomeFilter',JSON.stringify(this.filter))
		this.$Message.info('成功保存表格');
	}*/
  }
};
</script>
<style scoped>
</style>